<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/pages/repairs.css" />
	</head>

	<body>
		<div id="matter">
			<div class="content">
				<!--输入框-->
				<div class="name">
					<span class="title-name wuye-phone">选择报修类型 <i @click="onWuYePhone">物业电话</i> </span>
					<div class="matterType">
						<div class="mui-input-row mui-radio">
							<label>报修</label>
							<input value="1"  v-model="matterType" type="radio">
						</div>
						<div class="mui-input-row mui-radio">
							<label>建议</label>
							<input value="2" v-model="matterType" type="radio">
						</div>
						<div class="mui-input-row mui-radio">
							<label>投诉</label>
							<input value="3" v-model="matterType" type="radio">
						</div>
					</div>
				</div>
				<div class="mui-input-row padding15">
					<span class="title-name">报修内容</span>
					<textarea id="textarea" type="search" v-model="matterTxt" @focus="focusClick" @blur="blurClick" rows="5"
					 placeholder="请说明一下您遇到的问题…"></textarea>
				</div>
				<!--上传图片-->
				<div class="img-wapper padding15 bottom-underline">
					<div class="preview" v-for="(item,index) in listImg" v-if="listImg.length > 0">
						<i class="delete" @click="deleteClick(index)"></i>
						<img :src="item" @click="getItemImgClick(index)">
					</div>
					<div class="button" @click="addImgClick">
						<img src="../../../images/add.png">
					</div>
				</div>
				<!--录音-->
				<div class="record-wapper" v-if="recordList.length>0">
					<div class="record-item" v-for="(item,index) in recordList" @click="playAudio(item.entry)" :style="'width:'+ item.divWidth+'px'">
						<img class="record-icon" src="../../../images/home/repairs/wifi.png" />
						<div>{{item.num}}″</div>
					</div>
				</div>
				<div class="record-1" id="record">
					<div class="img-wapper"><img src="../../../images/home/repairs/luyin-f.png"></div>
					<span class="text">按住说话</span>
				</div>
			</div>

			<div class="botton-wapper" @click="submitClick">
				提交
			</div>

			<div class="mrk-record" v-if="sate">
				<div class="record">
					<img class="record-img" src="../../../images/home/repairs/luyin-f.png" />

					<span v-if="record" class="record-span">录音中{{num}}s</span>
					<span v-else class="record-span">播放中</span>
				</div>
			</div>
		</div>

		<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init({
				gestureConfig: {
					tap: true, //默认为true
					doubletap: true, //默认为false
					longtap: false, //默认为false
					swipe: true, //默认为true
					drag: true, //默认为true
					hold: true, //默认为false，不监听
					release: true //默认为false，不监听
				}
			})

			var Record = null
			var timer = null
			var ti = 0;
			mui.plusReady(function() {
				if (!mui.os.android) {
					FastClick.attach(document.body);
				}
				plus.webview.currentWebview().setStyle({
					softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度
				});
				Record = plus.audio.getRecorder();
				mui('#record')[0].addEventListener("hold", function() {
					if (matter.recordList.length > 2) {
						mui.toast('最多只能发3条语音')
						return;
					}
					matter.record = true
					matter.sate = true
					openRecord()
					ti = 0;
					timer = setInterval(function() {
						matter.num++
						if (matter.num === 60) {
							clearInterval(timer); // 停止时间
							Record.stop(); // 结束计时
							matter.sate = false // 关闭语音窗体
						}
					}, 1000);
				});

				mui('#record')[0].addEventListener("release", function() {
					matter.sate = false
					matter.record = false
					Record.stop();

				});
			})

			function GetOrganization() {
				mui.post(httpUrl.testUrl + '/api/ReportThing/GetOrganization', {
					neiID: plus.storage.getItem('neiID')
				}, function(res) {
					if (res.code == 1001) {
						var list = []
						res.data.forEach(function(item, index) {
							var value = item.orgID
							var text = item.orgName
							list.push({
								value: value,
								text: text
							})
						})
						Department.setData(list)
					}
				})

			}

			function openRecord() {
				Record.record({
					filename: "_doc/audio/"
				}, function(res) {
					plus.io.resolveLocalFileSystemURL(res, function(entry) {
						var recordData = {} // 定义一个空对象
						clearInterval(timer); // 停止时间
						timer = null
						if (matter.num > 1) {
							recordData.divWidth = matter.num * (htmlWidth / 30) + 40
							recordData.num = matter.num //将计时结束后的数字放在 recorData 对象里
							recordData.entry = entry //将录音返回的文件路径在 recorData 对象里
							recordData.Url = res
							console.log(res)
							matter.recordList.push(recordData) // 将 recorData 对象 push到 vue 对象matter里的recordList数组里。
						} else {
							mui.toast('录音太短！')
						}
						matter.num = 0
					}, function(e) {
						outLine('读取录音文件错误：' + e.message);
					});
				}, function(e) {
					alert('发生了错误!' + e.message)
				})
			}

			var p = null

			function startPlay(url) {
				p = plus.audio.createPlayer(url);
				p.play(function() {
					matter.sate = false;
					mui.toast('播放完成！');
					// 播放完成
				}, function(e) {
					mui.alert('播放音频文件"' + url + '"失败：' + e.message);
				});
			}

			var matter = new Vue({
				el: "#matter",
				data: {
					num: 0,
					leaderID: '',
					sate: false,
					bottomWapper: true,
					record: false,
					matterType: "1",
					matterTxt: '',
					recordList: [],
					listImg: []
				},
				methods: {
					onWuYePhone: function() {
						mui.openWindow({
							url: '../callCenter.html',
							id: 'callCenter',
							waiting: {
								autoShow: false
							}
						})
					},
					
					GetEmployee: function(orgID) {
						var that = this
						mui.post(httpUrl.testUrl + '/api/ReportThing/GetEmployee', {
							orgID: orgID
						}, function(res) {
							if (res.code == 1001) {
								var list = []
								res.data.forEach(function(item, index) {
									var value = item.userID
									var text = item.empName
									list.push({
										value: value,
										text: text
									})
								})
								that.personnelSelect(list)
							}
						})
					},

					addImgClick: function() {
						var dListImg = this.listImg
						var that = this
						// 从相册中选择图片
						plus.gallery.pick(function(e) {
							that.listImg = dListImg.concat(e.files)

							if (that.listImg.length > 3) {
								var num = that.listImg.length - 3
								that.listImg = that.listImg.slice(num)
							}
							
						}, function(e) {
							mui.toast('取消选择图片');
						}, {
							filter: 'image',
							multiple: true,
							maximum: 3,
							system: false,
							onmaxed: function() {
								plus.nativeUI.alert('最多只能选择3张图片');
							}
						});
					},
					deleteClick: function(num) {
						this.listImg.splice(num, 1)
					},

					playAudio: function(text) {
						if (!text) {
							mui.toast('无效的音频文件');
							return;
						}
						this.sate = true;
						console.log(text.name)
						startPlay('_doc/audio/' + text.name);
					},

					focusClick: function() {
						this.bottomWapper = false
					},

					blurClick: function() {
						this.bottomWapper = true
					},

					getItemImgClick: function(num) {
						var listImg = this.listImg
						plus.nativeUI.previewImage(listImg, {
							current: num
						})
					},
					submitClick: function() { // 提交方法
						var that = this
						if (!that.matterTxt) {
							mui.toast('请输入内容')
							return
						}
						plus.nativeUI.confirm("您确定要提交吗？", function(e) {
							if (e.index == 0) {
								plus.nativeUI.showWaiting('提交中', {
									width: '100px',
									height: '100px'
								});
								that.postReport() // 提交文本
							}
						})
					},

					postFileReptImg: function(repID) { //提交图片
						var that = this
						var server = Util.HTTP + 'api/Repairs/RepairsImg';
						var imgList = that.listImg;
						var wt = plus.nativeUI.showWaiting();
						var task = plus.uploader.createUpload(server, {
								method: "POST"
							},
							function(t, status) { //上传完成
								if (status == 200) {
									wt.close(); //关闭等待提示按钮
								} else {
									alert("上传失败：" + status);
									wt.close(); //关闭等待提示按钮
								}
							}
						);
						//添加其他参数
						task.addData("repID", repID);
						imgList.forEach(function(item, num) {
							task.addFile(item, {
								key: item
							});
						})
						task.start();
					},

					postFileReptVoice: function(repID) { //提交录音方法
						var that = this
						var server = Util.HTTP + 'api/Repairs/RepairsVoice';
						var recordList = that.recordList;
						var wt = plus.nativeUI.showWaiting();
						var task = plus.uploader.createUpload(server, {
								method: "POST"
							},
							function(t, status) { //上传完成
								if (status == 200) {
									wt.close(); //关闭等待提示按钮
								} else {
									alert("上传失败：" + status);
									wt.close(); //关闭等待提示按钮
								}
							}
						);
						//添加其他参数
						task.addData("repID", repID);
						recordList.forEach(function(item, num) {
							task.addFile(item.Url, {
								key: item.Url
							});
						})
						task.start();
					},

					postReport: function() { //提交文本
						var that = this
						var userID = Util.getState('$state').userID // 获取用户ID
						var neiID = Util.getState('hosing').neiID // 获取用户小区ID
						var roomID = Util.getState('hosing').roomID // 获取房间ID
						mui.post(Util.HTTP + 'api/Repairs/PostRepairs', {
							userID: userID,
							neiID: neiID,
							roomID:roomID,
							repType: that.matterType,
							repDetails: that.matterTxt ? that.matterTxt : '暂无内容',
						}, function(res) {
							if (res.code === 1001) {
								console.log(res.data)
								if (that.listImg.length > 0) {
									that.postFileReptImg(res.data) //提交图片方法	
								}
								if (that.recordList.length > 0) {
									that.postFileReptVoice(res.data) //提交录音方法
								}
								plus.nativeUI.closeWaiting();
								mui.alert('报事提交成功！', function() {
									mui.back()
								})
							} else {
								mui.alert('调用上传报事文本接口出现失败', res)
								plus.nativeUI.closeWaiting();
							}
						})
					},

				}
			})
		</script>
	</body>

</html>
